<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .list{
            margin: 0 auto;
            margin: 150px;
            width: 200px;
            height: 150px;
            overflow: auto;
        }
        .news{
            height: 30px;
            width: 100%;
            background: rgb(0, 195, 255);
        }
    </style>
</head>
<body>
    <div id='test'></div>   

    <script src="../demo1/js/react.development.js"></script>
     <script src="../demo1/js/react-dom.development.js"></script>
     <script src="../demo1/js/babel.min.js"></script>
     <script src="./js/prop-types.js"></script> 
     <script type="text/babel">
         class NewsList extends React.Component{
            // 初始化
            state = {newArr:[]}
            
            componentDidMount(){
                setInterval(()=>{
                    // 获取原有数据
                    const {newArr} = this.state
                    // 新数据
                    const newData = '新闻'+(newArr.length+1)
                    // 设置数据
                    this.setState({
                        newArr:[newData,...newArr]
                    })
                },1000)
            }

            getSnapshotBeforeUpdate(){
                return this.refs.list.scrollHeight
            }

            componentDidUpdate(preprops,prestate,snapshot_height){
                // this.refs.list.scrollTop += 30
                this.refs.list.scrollTop += this.refs.list.scrollHeight - snapshot_height
            }
             
            render() {
                return (
                    <div className="list" ref='list'>
                        {
                            this.state.newArr.map((n,k)=><div key={k} className="news" >{n}</div>)
                        }
                    </div>
                )
            }
         }


         ReactDOM.render(<NewsList />, document.querySelector('#test'))
     </script>
</body>
</html>